<template>
<div class="waybill_drawer">
    <!-- 导入模板的 -->
    <el-drawer
      title="运单批量导入"
      :visible.sync="drawerDeliveryData"
      :direction="direction"
      :before-close="handleClose"
      :wrapperClosable="false"
      size="50%"
      :with-header="false"
    >
      <div>
        <div class="header">
          <span class="order-title">配送批量修改导入操作流程</span>
          <div class="order-right">
            <span class="order-close">
              <i class="el-icon-close" @click="handleClose" />
            </span>
          </div>
        </div>
        <div class="body_center">
          <div class="first_step">
            <div style="color: #378cbe">操作流程:</div>
            <div>
              <span>第一步:</span>
              <span>&nbsp;&nbsp;下载导入模板</span>
              <!-- <span style="padding-left: 10px" @click="innerDrawerTure()">
                <span class="el-icon-setting" style="color: #0097cf"></span>
                <span style="color: #0097cf">设置模板</span>
              </span> -->
            </div>
            <div>
              <span style="color: #ff9a00">
                如需要调整模板字段,点击模板设置</span>
              <el-button type="primary" style="float: right">
                <span class="el-icon-download"></span>
                <span :href="ApiurlHtml" style="color: #ffffff" @click="reductionDown" data-tracker="P2-17">下载模板</span>
              </el-button>
            </div>
          </div>
          <div class="second_step">
            <div>第二步:</div>
            <div>
              <span style="color: #ff9a00">
                文件不超过2M,建议先上传少量数据测试导入数据的有效性
              </span>
              <div style="float:right">
                <el-upload class="upload-demo" ref="add-upload" action multiple :auto-upload="false" :limit="1" :on-exceed="onexceedfunt" :file-list="business_license" :on-change="
                    (file, fileList) => {
                      handleChange(file, fileList, 29);
                    }
                  " :on-remove="
                    (file, fileList) => {
                      removeChange(file, fileList, 29);
                    }
                  ">
                  <el-button slot="trigger" type="primary" size="mini" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="third_step">
            <div>
              <span>第三步:&nbsp;&nbsp;提交导入</span>
              <el-button type="primary" icon="el-icon-thumb" style="float: right" @click="derive()">提交导入</el-button>
            </div>
          </div>
          <div class="four_step">
            <div>
              导入结果:&nbsp;&nbsp;
              <div v-for="(o, index) in toLead_result" :key="index" class="text item" style="color: red;line-height: 20px;">
                {{ index + 1 }}.{{ o }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
</div>
</template>
<script>
import {waybillDistributionImportUpdate} from "../../api/waybill";
import { uploading } from "../../page/material/common/common";
import { getToken } from "@/utils/auth";

export default {
  name: "ImportDelivery",
  props: ["drawerDeliveryData"],
  data() {
    return {
      direction: 'rtl',
      innerDrawer: false,
      url: process.env.VUE_APP_URL,
      toLead_result: "",
      ApiurlHtml: "",
      fileList: [],
      business_license: [],
      ImportDataUrl:"",
    };
  },
  computed: {
  },
  methods: {
    reductionDown() {
      var DownUrl = "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/undefined/1708930528934%E6%89%B9%E9%87%8F%E4%BF%AE%E6%94%B9%E4%BF%A1%E6%81%AF(3).xlsx"          
      window.open(DownUrl)
    },
    onexceedfunt() {
      let msg = "请勿上传多个文件";
      this.ContentSuccess(msg);
    },
    handleClose() {
      this.drawerDeliveryData = false
      this.$emit('drawerDeliveryShow',false)
    },
    // 上传到oss上
    handleChange(file, fileList, type) {
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((result) => {
        var resname = result.name;
        this.ImportDataUrl = resname;
        var resType = resname.split("/")[0];
        var filehttp = "http://oss.dushisc.com/";
        //this.ImportDataUrl = filehttp + resname
        switch (resType) {
          case "59":
            this.business_license.push({
              name: filehttp + result.name,
            });
            break;
        }
      });
    },
    // 删除调用
    removeChange(file, fileList, type) {
      switch (type) {
        case 59:
          if (this.business_license.length > 0) {
            for (var i = 0; i < this.business_license.length; i++) {
              if (this.business_license[i].uid == file.uid) {
                this.business_license.splice(i, 1);
              }
            }
          }
          break;
      }
    },
    derive() {
      const data = {
        file_name: this.ImportDataUrl,
        header_id: "3",
      };
      waybillDistributionImportUpdate(data).then((res) => {
        if (res.code === 10000) {
          var msg = res.data.res;
          this.toLead_result = msg;
        } else {
          var msg = res.msg;
          this.ContentSuccess(msg);
        }
      });
    },
    ContentSuccess(msg) {
      this.$message({
        message: msg,
        type: "success",
      });
    },
    // 强制刷新当前页面
    locationReload() {
      location.reload();
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-upload{
  display: block !important;
  text-align: right !important;
}
/deep/.el-drawer__header{
        margin-bottom: 0px !important;
        background: #eee !important;
    	border-bottom: 1px solid #ccc !important;
		padding: 10px 20px 10px 20px !important;
}
// 头部信息
.header {
  width: 100%;
  height: 36px;
  background: #5a6d82;
  line-height: 36px;
  .order-title {
    color: #fff;
    font-size: 14px;
    padding-left: 12px;
  }
  .order-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 35px;
    line-height: 35px;
    .order-close {
      height: 35px;
      display: inline-block;
      overflow: hidden;
      position: relative;
      padding: 0 10px;
      cursor: pointer;
      color: #fff;
    }
  }
}
// 中间信息
.body_center {
  width: 98%;
  height: 400px;
  // border: 1px solid #dddddd;
  margin: 10px auto;
  .first_step {
    width: 98%;
    height: 90px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }
  .second_step {
    width: 98%;
    min-height: 62px;
    overflow: hidden;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }
  .third_step {
    width: 98%;
    height: 45px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }
  .four_step {
    width: 98%;
    height: 45px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }
}
</style>